<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta id="userScale" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <style type="text/css">
        .imgBox {
            overflow: hidden;
        }
        .imgBox img{width:100px;height:100px;border:1px solid red;float:left; margin-right:10px;margin-bottom: 10px;}
    </style>
</head>
<body>
    <input type="file" />
    <div class="imgBox">
        
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script type="text/javascript">
        var imgarr = [];
       
        $('input').on('change',function(){
            var file = $(this).get(0).files[0];
            var reader = new FileReader();

            
            if(file.type == "image/jpeg"){
                
                reader.addEventListener('load', () => {
                    imgarr.push(reader.result)
                    var imgstr = '';
                    for(var i =0; i< imgarr.length; i++){
                        imgstr += '<img src='+imgarr[i]+' />'
                    }
                    
                    $('.imgBox').html(imgstr)
                }, false)
                reader.readAsDataURL(file);
                $(this).val('')  //解决连续两次选取同一个文件不触发change事件的问题
            }else {
                console.log('请上传图片！')
            }
        })
        
    </script>
</body>
</html>